<template>
  <div class="header-container">
    <div class="r-content">
      <!-- @command="handleClick" -->
      <el-dropdown>
        <div class="el-dropdown-link">
          <span class="text">用户&nbsp;&nbsp;</span>
          <img
            class="user"
            src="../assets/images/user.png"
            alt="" />
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item>
            <span @click="logOff">注销</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { Exit } from "../api/index";
import Cookie from "js-cookie";
export default {
  data() {
    return { access_token: Cookie.get("token") };
  },
  methods: {
    // 退出
    logOff() {
      Exit().then(({ data }) => {
        Cookie.remove("token");
        this.$router.push("/login");
        console.log(data);
      });
    },
  },
};
</script>

<style>
.whole {
  background-color: #edf7ff;
}
.header-container {
  height: 80px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.r-content {
  margin-left: 97%;
}
.r-content .user {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.text {
  font-size: 20px;
  padding: 5px;
  margin-left: -100%;
}
.el-dropdown-link {
  display: flex;
}
</style>
